<template>
  <KView class="comment-circle">
    <page-header title="评论列表" @back-click="toBack"></page-header>
    <KView class="comment-circle-line"></KView>

    <KView class="comment-circle-title clearfix">
      <KView class="comment-circle-title-svg">
        <sys-svg name="discuss" color="#59c264"></sys-svg>
      </KView>
      <KView class="comment-circle-title-text">全部评论</KView>
    </KView>
    <KView class="comment-circle-line comment-circle-inner-line"></KView>

    <KView class="comment-circle-content">
      <template v-if="isShow">
        <circle-log-view :logs="logList" :pagination="pagination" :next-data-fun="setCircleLogList" @item-click="logItemClick"></circle-log-view>
      </template>
    </KView>
    <KView class="comment-circle-line"></KView>
    <KView class="comment-circle-submit">
      <input class="comment-circle-input" v-model="circleLog.content" :maxlength="120" :placeholder="circleLog.placeholder" :focus="inputFocusStatus"
        @focus="handleFocus" @blur="handleBlur" @confirm="submit">
    </KView>
  </KView>
</template>

<script>
  import PageHeader from 'common/pageHeader';
  import SysSvg from 'common/sysSvg';
  import CircleLogView from './circleLogView';

  import Pagination from 'models/pagination';
  import CommentCircleLog from 'models/sysCircle/commentCircleLog';

  import SysCircleApi from 'services/sysCircleApi';
  import SystemUtil from 'utils/systemUtil';

  export default {
    data() {
      let spaceId = this.$route.params.id;
      spaceId = Number(spaceId);
      let circleLog = new CommentCircleLog(spaceId);
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        pagination: null,
        circleLog: circleLog,
        inputFocusStatus: false,
        logList: [],
        logMap: {}
      };
    },

    created() {
      let pagination = new Pagination();

      SystemUtil.showLoading();
      this.setCircleLogList(pagination, true).then(() => {
        this.pagination = pagination;
        this.isShow = true;
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setCircleLogList(pagination = null, isInit = false, isKeep = false) {
        if (pagination === null) {
          pagination = this.pagination;
        }

        let spaceId = this.circleLog.spaceId;
        return SysCircleApi.getCircleLogData(spaceId, pagination, true, isKeep).then(logList => {
          if (isInit) {
            this.logMap = {};
          }

          let logMap = this.logMap;
          let logData = [];
          for (let i = 0; i < logList.length; i++) {
            const log = logList[i];
            let logId = log.logId;
            if (logMap[logId] !== undefined) {
              continue;
            }
            logMap[logId] = log;
            logData.push(log);
          }

          if (isInit) {
            this.logList = logData;
          } else {
            this.logList.push(...logData);
          }

          return logData;
        });
      },

      handleBlur(event) {
        this.inputFocusStatus = false;
      },

      handleFocus(event) {
        if (this.inputFocusStatus) {
          return;
        }
        this.circleLog.resetLogData(null);
        this.inputFocusStatus = true;
      },

      logItemClick(log) {
        if (this.inputFocusStatus) {
          return;
        }
        this.circleLog.resetLogData(log);
        this.inputFocusStatus = true;
      },

      submit(event) {
        let circleLog = this.circleLog;
        let code = circleLog.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`sysCircle.commentCircle.error.${code}`);
          this.$api.showToast({
            title: msg,
            icon: 'none'
          });
          return;
        }

        SystemUtil.showLoading('');
        SysCircleApi.sendCircleLog(circleLog).then(() => {
          return this.setCircleLogList(null, true, true).then(() => {
            let pages = getCurrentPages();
            if (pages.length > 1) {
              let page = pages[pages.length - 2];
              let pageWin = page.window;
              if (pageWin.resetCircleZoneLog) {
                pageWin.resetCircleZoneLog(circleLog.spaceId);
              }
            }
            circleLog.resetLogData(null, true);

            SystemUtil.hideLoading();
          });
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      PageHeader,
      SysSvg,
      CircleLogView
    }
  };

</script>

<style lang="scss">
  .comment-circle {
    height: 100%;

    .page-header {
      margin-bottom: formatPx(20);
    }

    .comment-circle-line {
      height: 1px;
      background: #DADADA;
    }

    .comment-circle-inner-line {
      margin: 0 formatPx(30);
    }

    .comment-circle-title {
      margin-top: formatPx(30);
      margin-bottom: formatPx(30);
      padding: 0 formatPx(30);
      height: formatPx(42);
      line-height: formatPx(42);

      >div {
        float: left;
        height: 100%;
      }

      .comment-circle-title-svg {
        width: formatPx(46);
      }

      .comment-circle-title-text {
        margin-left: formatPx(26);
        font-size: formatPx(36);
      }
    }

    .comment-circle-content {
      height: calc(100% - #{formatPx(356)});
      padding: 0 formatPx(30);
      margin-top: formatPx(30);
      margin-bottom: formatPx(30);
      overflow: auto;

      .circle-log-view {
        height: calc(100% - #{formatPx(60)});
        padding: formatPx(30);
        background: #f6f6f6;
        overflow: auto;
      }
    }

    .comment-circle-submit {
      height: formatPx(70);
      padding: 0 formatPx(30);
      margin-top: formatPx(20);
      margin-bottom: formatPx(20);

      .comment-circle-input {
        border: 1px solid #dadada;
        width: calc(100% - 2px - #{formatPx(40)});
        height: calc(100% - 2px);
        padding: 0 formatPx(20);
        border-radius: 8px;
        font-size: formatPx(26);
      }
    }
  }

</style>
